<template>
  <div class="echarts">
    <el-alert
      title="这里只是简单使用了Echarts，更多详细用法请查看Echarts官网：https://echarts.apache.org/zh/index.html"
      type="success"
    />
    <el-row :gutter="10">
      <el-col :xs="24" :md="12" :lg="12" :xl="8">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>关键帧描边动画</span>
            </div>
          </template>
          <div class="box" id="divAnimation"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :md="12" :lg="12" :xl="8">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>基础柱状图</span>
            </div>
          </template>
          <div class="box" id="divCategory"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :md="12" :lg="12" :xl="8">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>饼图</span>
            </div>
          </template>
          <div class="box" id="divPie"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :md="12" :lg="12" :xl="8">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>仪表盘</span>
            </div>
          </template>
          <div class="box" id="divGauge"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :md="12" :lg="12" :xl="8">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>基础折线图</span>
            </div>
          </template>
          <div class="box" id="divLine"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :md="12" :lg="12" :xl="8">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>雷达图</span>
            </div>
          </template>
          <div class="box" id="divRadar"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
// 如果需要不同的主题风格，可以这样用
// import T from './echarts-theme-T.js';
// echarts.registerTheme('T', T);

onMounted(() => {
  initCategory();
  initPie();
  initGauge();
  initLine();
  initRadar();
  initAnimation();
});

// 柱状图
function initCategory() {
  let option = {
    legend: {},
    tooltip: {},
    dataset: {
      source: [
        ["product", "2015", "2016", "2017"],
        ["Matcha Latte", 43.3, 85.8, 93.7],
        ["Milk Tea", 83.1, 73.4, 55.1],
        ["Cheese Cocoa", 86.4, 65.2, 82.5],
        ["Walnut Brownie", 72.4, 53.9, 39.1],
      ],
    },
    xAxis: { type: "category" },
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
  };
  var myChart = echarts.init(document.getElementById("divCategory")); // echarts 必须使用原生获取dom节点，document.getElementById
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}

// 饼图
function initPie() {
  let option = {
    title: {
      text: "Referer of a Website",
      subtext: "Fake Data",
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "50%",
        data: [
          { value: 1048, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" },
          { value: 484, name: "Union Ads" },
          { value: 300, name: "Video Ads" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
  var myChart = echarts.init(document.getElementById("divPie")); // echarts 必须使用原生获取dom节点，document.getElementById
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}

// 仪表盘
function initGauge() {
  let option = {
    tooltip: {
      formatter: "{a} <br/>{b} : {c}%",
    },
    series: [
      {
        name: "Pressure",
        type: "gauge",
        progress: {
          show: true,
        },
        detail: {
          valueAnimation: true,
          formatter: "{value}",
        },
        data: [
          {
            value: 50,
            name: "SCORE",
          },
        ],
      },
    ],
  };
  var myChart = echarts.init(document.getElementById("divGauge")); // echarts 必须使用原生获取dom节点，document.getElementById
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}

function initLine() {
  let option = {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
      },
    ],
  };
  var myChart = echarts.init(document.getElementById("divLine")); // echarts 必须使用原生获取dom节点，document.getElementById
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}

// 雷达图
function initRadar() {
  let option = {
    title: {
      text: "Basic Radar Chart",
    },
    legend: {
      data: ["Allocated Budget", "Actual Spending"],
    },
    radar: {
      // shape: 'circle',
      indicator: [
        { name: "Sales", max: 6500 },
        { name: "Administration", max: 16000 },
        { name: "Information Technology", max: 30000 },
        { name: "Customer Support", max: 38000 },
        { name: "Development", max: 52000 },
        { name: "Marketing", max: 25000 },
      ],
    },
    series: [
      {
        name: "Budget vs spending",
        type: "radar",
        data: [
          {
            value: [4200, 3000, 20000, 35000, 50000, 18000],
            name: "Allocated Budget",
          },
          {
            value: [5000, 14000, 28000, 26000, 42000, 21000],
            name: "Actual Spending",
          },
        ],
      },
    ],
  };
  var myChart = echarts.init(document.getElementById("divRadar")); // echarts 必须使用原生获取dom节点，document.getElementById
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}

// 关键帧描边动画
function initAnimation() {
  let option = {
    graphic: {
      elements: [
        {
          type: "text",
          left: "center",
          top: "center",
          style: {
            text: "jxf-admin",
            fontSize: 80,
            fontWeight: "bold",
            lineDash: [0, 200],
            lineDashOffset: 0,
            fill: "transparent",
            stroke: "#409EFF",
            lineWidth: 1,
          },
          keyframeAnimation: {
            duration: 3000,
            loop: true,
            keyframes: [
              {
                percent: 0.7,
                style: {
                  fill: "transparent",
                  lineDashOffset: 200,
                  lineDash: [200, 0],
                },
              },
              {
                // Stop for a while.
                percent: 0.8,
                style: {
                  fill: "transparent",
                },
              },
              {
                percent: 1,
                style: {
                  fill: "black",
                },
              },
            ],
          },
        },
      ],
    },
  };
  var myChart = echarts.init(document.getElementById("divAnimation")); // echarts 必须使用原生获取dom节点，document.getElementById
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
</script>

<style lang="scss" scoped>
.echarts {
  padding: 10px;
  .box {
    height: 250px;
  }
  .el-col {
    margin-top: 10px;
  }
}
</style>
